<template>
	<view>
		<view class="emptybg"></view>
		<view class="task-info">
			<view class="task-detail">
				<image :src="task_detail.thumb" mode="aspectFill"></image>
				<view class="task-title">
					<text>{{task_detail.title}}</text>
					<view class="progress">进行中，进度：{{task_detail.quantity-task_detail.surplus}}/{{task_detail.quantity}}</view>
				</view>
			</view>
			<view class="task-money">
				<text>￥</text>{{task_detail.arrive_price}}
			</view>
		</view>
		<view style="height: 220rpx;"></view>
		<me-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange" :height="100" :tabWidth="150"></me-tabs>
		<mescroll-uni top="320" ref="mescrollRef" @init="mescrollInit" @up="upCallback" @down="downCallback" :down="downOption"
		 :up="upOption">
			<checkbox-group @change="changeCheckbox">
				<view class="examine" v-for="(item,index) in listdata" :key="index">
					<view class="top-info">
						<view class="userinfo">
							<image :src="item.avatar" mode="aspectFill"></image>
							<text>{{item.nickname}}</text>
						</view>
						<view class="timer">{{item.add_time}}</view>
					</view>
					<view v-if="item.status>1">
						<view class="content">
							<image style="background-color: #f5f5f5;" v-for="(img,indeximg) in item.verification_diagram" :key="indeximg"
							 :src="img" mode="aspectFill" @click="showimg(item.verification_diagram,indeximg)"></image>
						</view>
						<view class="ver-text" v-if="item.verification_text">验证文字：{{item.verification_text}}</view>
					</view>
					<!--有复审记录-->
					<view class="ver_again" v-if="item.verification_diagram_re">该接单有过驳回，请进入详情页查看接单人重新上传的记录</view>
					<view class="button">
						<view class="status">
							<label class="corss" v-if="item.status==2">
								<checkbox :value="item.id" :checked="idarr.includes(item.id)"></checkbox>
								<text>待审核</text>
							</label>
							<text v-else>{{tabs[item.status]}}</text>
						</view>
						<view class="operation">
							<view v-if="item.status==2" style="display: flex;">
								<view class="item-op" @click="passtask('sign',item.id)">通过</view>
								<view class="item-op" @click="navgoto('/pages/task/reject?id='+item.id)">驳回</view>
							</view>
							<view class="item-op" @click="navgoto('/pages/task/record?id='+item.id)">查看</view>
						</view>
					</view>
				</view>
			</checkbox-group>
			<view class="empty-box"></view>
		</mescroll-uni>
		<view class="buttom-button">
			<checkbox-group @change="allChoose">
				<label class="choice">
					<checkbox value="all" :checked="choiceall?true:false"></checkbox>
					<text>你已勾选{{count_checkbox}}个接单</text>
				</label>
			</checkbox-group>
			<view class="batch" @click="passtask('batch')">批量通过</view>
		</view>
	</view>
</template>

<script>
	/**
	 *  审核列表
	 */
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				idarr: [],
				count_checkbox: 0, //统计选择数量
				choiceall: false, //是否全选
				task_detail: {}, //任务详情
				listdata: [],
				tabIndex: 0,
				tabs: ['全部', '进行中', '待审核', '已通过', '已关闭', '未通过', '仲裁中', '待复审'],
				id: '',
				downOption: {
					auto: true,
					autoShowLoading: true,
					textLoading: "玩命加载中...",
				},
				upOption: {
					auto: false,
					noMoreSize: 4,
					empty: {
						tip: '~ 搜索无数据 ~',
						btnText: ''
					},
					textLoading: "玩命加载中...",
					textNoMore: "-- 人家是有底线的 --",
				}
			}
		},
		onLoad(option) {
			this.id = option.id
		},
		methods: {
			//选择全部
			allChoose(e) {
				this.idarr = []
				if (this.choiceall) {
					console.log('已是全选状态，将取消全选')
					this.choiceall = false
					this.count_checkbox=0
				}else if(!this.choiceall) {
					console.log('未全选，将全选')
					this.listdata.map((item, index) => {
						if(item.status==2){
							this.idarr.push(item.id)	
						}
					})
					this.count_checkbox = this.idarr.length
					this.choiceall = true
				}
				console.log(this.idarr)
			},
			//单选择
			changeCheckbox(e) {
				this.count_checkbox = e.detail.value.length
				this.idarr = e.detail.value
				//统计待审核的
				let examinearr=[]
				this.listdata.map(item=>{
					if(item.status==2){
						examinearr.push(item.id)
					}
				})
				//判断选择的ID是否是全部在examinearr数组中
				if (this.idarr.length === examinearr.length) {
					//赋值全选
					this.choiceall = true
				}else{
					this.choiceall = false
				}
				console.log(this.idarr)
			},
			//通过操作 sign单个，批量batch
			passtask(type, id = 0) {
				//处理提交的id
				let poststrid = ''
				if (id > 0 && type == "sign") {
					//单个提交
					poststrid = id
				} else {
					//批量提交
					if(this.idarr.length==0){
						this.$ShowMsg('请选择要通过的任务')
					return
					}
					poststrid = this.idarr.join(',')
				}
				 // console.log(poststrid)
				 // return
				this.$HttRequest({
					url: '/moonlightOrder/pass',
					param: {
						id: poststrid
					}
				}, 'POST', true).then((res) => {
					console.log(res)
					if (res.status === 10000) {
						this.$ShowMsg('已审核通过', 'success')
						this.upCallback({num:1})
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg(error.errMsg)
				})
			},

			//预览图片
			showimg(imgarr, current) {
				this.$Preimage(imgarr, current)
			},
			//切换菜单
			tabChange(index) {
				this.tabIndex = index;
				this.listdata = [];
				this.mescroll.resetUpScroll();
			},
			downCallback(e) {
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				//console.log(page);
				this.getinitdata(page.num).then(res => {
					this.mescroll.endSuccess(res.length);
					//设置列表数据
					if (page.num == 1) this.listdata = []; //如果是第一页需手动制空列表
					if(res.length>0){
						//给数组配置选中字段
						res.map((item,index)=>{
							res[index].choice = false
						})
					}
					console.log(res,222)
					this.listdata = this.listdata.concat(res); //追加新数据
				}).catch(error => {
					//联网失败, 结束加载
					this.mescroll.endErr();
					this.$ShowMsg(error);
				})
			},
			//获取列表数据
			getinitdata(pages) {
				return new Promise((resolve, reject) => {
					this.$HttRequest({
						url: '/moonlight/releaseDetails',
						param: {
							page: pages,
							id: this.id,
							status: this.tabIndex
						}
					}).then((res) => {
						console.log(res)
						if (res.status === 10000) {
							resolve(res.data.moonlightOrder.data)
							//任务详情
							this.task_detail = res.data.moonlight
						} else {
							this.$ShowMsg(res.message)
						}
					}).catch((error) => {
						//异常错误
						reject(error.errMsg);
					})
				})
			},
			navgoto(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.empty-box {
		height: 150rpx;
	}

	.examine {
		margin: 20rpx auto;
		width: 90%;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		flex-direction: column;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f8f8f8;

		.ver-text {
			font-size: 25rpx;
			color: #000;
			text-align: left;
			margin-bottom: 10rpx;
		}

		.ver_again {
			margin: 10rpx 0;
			font-size: 22rpx;
			border-radius: 20rpx;
			padding: 5rpx 20rpx;
			width: 90%;
			background-color: #f5f5f5;
			color: #9e9e9e;
		}

		.button {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			margin-top: 20rpx;

			.operation {
				display: flex;
				justify-content: center;
				align-items: center;

				.item-op {
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 25rpx;
					margin-right: 20rpx;
					width: 100rpx;
					height: 55rpx;
					border: 1rpx solid #f0f0f0;
				}
			}

			.status {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #333;

				.corss {
					checkbox {
						transform: scale(0.6);
					}
				}
			}
		}

		//内容
		.content {
			margin: 30rpx 0;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			width: 100%;
			flex-wrap: wrap;

			image {
				border-radius: 10rpx;
				width: 150rpx;
				height: 150rpx;
				margin-right: 20rpx;

			}
		}

		.top-info {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.userinfo {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;

				image {
					margin-right: 20rpx;
					border-radius: 50%;
					width: 60rpx;
					height: 60rpx;
				}
			}

			.timer {
				font-size: 22rpx;
				color: #9e9e9e;
			}
		}
	}

	.buttom-button {
		width: 100%;
		height: 80rpx;
		border-top: 1rpx solid #f0f0f0;
		display: flex;
		bottom: 0;
		left: 0;
		position: fixed;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 20rpx 0;
		background-color: #fff;
		z-index: 999;

		.choice {
			color: #9e9e9e;
			font-size: 28rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			checkbox {
				transform: scale(0.7);
			}
		}

		.batch {
			border-radius: 20rpx;
			width: 320rpx;
			height: 75rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 30rpx;
			font-weight: bold;
			background-color: $uni-color-primary;
		}
	}

	.emptybg {
		width: 100%;
		height: 200rpx;
		background-color: #fff;
		z-index: 655;
		position: fixed;
	}

	.task-info {
		width: 80%;
		position: fixed;
		top: 20rpx;
		left: 35rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 666;
		padding: 40rpx;
		border-radius: 20rpx;
		box-shadow: 0 10rpx 15rpx #e6e6e6;

		.task-detail {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 30rpx;
			}

			.task-title {
				display: flex;
				justify-content: center;
				align-items: flex-start;
				flex-direction: column;

				text {
					color: #333;
					font-weight: bold;
					font-size: 30rpx;
				}

				.progress {
					font-size: 25rpx;
					color: #9e9e9e;
					margin-top: 10rpx;
				}
			}
		}

		.task-money {
			display: flex;
			justify-content: center;
			align-items: center;
			color: #F43F3B;
			font-weight: bold;

			text {
				font-weight: normal;
				font-size: 22rpx;
			}
		}
	}
</style>
